<template>
  <commonformdialog
    :isshowDialogs="isshowDialog"
    :isshowconfirmbtn="false"
    :dialogWidth="'60%'"
    :enterTitle="false"
    :isshowimportTitle="false"
    :dialogTitle="'购买套餐包'"
    @closetextDialog="closetextDialog"
    @confirmbtn="confirmbtn"
    :topHeight="'25vh'"
  >
    <div class="">
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="medium"
        label-width="100px"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="套餐类型：" prop="reason">
              <span class="title">固定套餐包</span>
            </el-form-item>
            <el-form-item label="套餐配额：" prop="taocan">
              <span v-for="(p, i) in dataInfo" :key="i">
                <span
                  :class="
                    currentIndex == i ? 'taocanItem acItem' : 'taocanItem'
                  "
                  @click="chooseItem(i, p)"
                >
                  {{ p.total }}
                  <span class="addColor" style="font-weight: bold">
                    {{ p.price }}
                  </span>
                </span>
              </span>
            </el-form-item>
            <el-form-item label="购买数量：" prop="num">
              <el-input-number
                v-model="formData.num"
                controls-position="right"
                style="width: 100px"
                :min="1"
                :max="9999"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="总计费用：" prop="allCost">
              <h3 style="margin: 0" class="addColor">
                {{ formData.allCost }}
                <span>元</span>
              </h3>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

    </div>
  </commonformdialog>
</template>

<script>
//引入弹窗
import commonformdialog from '@/components/commondialog/commondialog'
import { getSessionStorage } from '@/utils/accessToken'
//api
import {
  preparePackage,

} from '@/api/activity'
export default {
  data() {
    return {
      //表单数据
      isshowDialogWe: false,
      currentIndex: 0,
      currentCost: 0,
      formData: {
        num: 1,
        allCost: 0,
      },
      rules: {},
      dataInfo: [],
      wechatUrl: '',
      timer: null,
      orderId: null,
    }
  },
  components: {
    commonformdialog,
  },
  props: {
    //是否显示弹窗
    isshowDialog: {
      type: Boolean,
      default: false,
    },
    //点击传递的参数
    dialogparams: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },

  methods: {
    //关闭弹窗
    closetextDialog() {
      this.$refs['elForm'].resetFields()
      this.$emit('closedefer')
    },

    chooseItem(i, p) {
      this.currentIndex = i
      this.currentCost = p.totalCost
      this.currentId = p.id
      this.formData.allCost  = p.totalCost
      this.formData.num=0
    },
    //点击确认
    confirmbtn() {
      let params = {
        totalCost: this.formData.allCost,
        type: 'prepare',
        packageId: this.currentId,
        num: this.formData.num,
      }
     this.$emit('confirm',params)
    },
    async getpreparePackage() {
      let data = await preparePackage()
      this.dataInfo = data.data
      this.currentCost = this.dataInfo[0].totalCost
      this.currentId = this.dataInfo[0].id
      this.formData.allCost = this.dataInfo[0].totalCost
    },
  },
  mounted(){
    this.getpreparePackage()
  },
  watch: {
    'formData.num': function (val) {
      this.formData.allCost = val * this.currentCost + '.00'
    },

  },
}
</script>

<style scoped lang='scss'>
.title {
  padding: 8px 12px;
  background-color: #4c68ef;
  color: #fff;
}
.taocanItem {
  padding: 10px 60px 30px 20px;
  border: 1px solid #f4f4f4;
  margin-right: 20px;
  margin-bottom: 20px;
  display: inline-block;
  cursor: pointer;
}
.acItem {
  border: 1px solid #4c68ef;
  position: relative;
  &::after {
    position: absolute;
    content: '';
    right: 0;
    bottom: 0;
    width: 20px;
    height: 20px;
    background: url('../../../../assets/sanjiao.png') no-repeat;
    background-size: 100%;
    z-index: 2022;
  }
}
.addColor {
  color: #ff4d4f;
}
</style>
